<template>
  <div class="student-ict">
    <div class="student-ict-title">{{title}}</div>
    <div class="student-ict-body">
        <div class="student-ict-info">
            <div class="student-info-title">
                <span class="student-info-name">{{currentName}}</span>
                <span class="student-info-job">{{currentJob}}</span>
            </div>
            <div class="student-job-info">
                <p>{{currentText}}</p>
            </div>
            <div class="student-img" :style="{backgroundImage: 'url(' + currentImg + ')'}">
                <!-- <img :src="currentImg"> -->
            </div>
        </div>
        <div class="student-ict-list">
            <div class="student-item-container" :style="{left: '-'+currentIndex*222 +'px'}">
                <div class="student-item" v-for="(item, key) in selfList" :key=key :style="{left: key*222 +'px'}">
                    <div class="student-item-img">
                        <!-- <img :class="{studentImgBorder: currentStudent == key}" :src="item.img" @click="changeStudent(key)"> -->
                        <img :src="item.img" @click="changeStudent(key)">
                    </div>
                    <p class="student-item-name">{{item.name}}</p>
                    <p class="student-item-job">{{item.job || item.position}}</p>
                </div>
            </div>
           
            <div class="to-left" @click="toLeft()">
                <i class="icon-zuojiantou"></i>
            </div>
            <div class="to-right" @click="toRight()">
                <i class="icon-youjiantou"></i>
            </div>
        </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'student_ict',
  data () {
      return{
        currentImg: "",
        currentJob: "",
        currentName: "",
        currentText: "",
        currentStudent: 0,
        currentIndex: 0,
        selfList: []
      }
    
  },
  props: {
    title: String,
    maxShow: Number,  
    studentList: {
      type: Array,
      required: true
    }
  },
 
  computed: {
   
  },
  mounted(){

  },
  methods: {
    changeStudent(key){
        this.currentStudent = key;
        this.currentImg = this.selfList[this.currentStudent].img;
        this.currentJob = this.selfList[this.currentStudent].job || this.selfList[this.currentStudent].position;
        this.currentName = this.selfList[this.currentStudent].name;
        this.currentText = this.selfList[this.currentStudent].detail || this.selfList[this.currentStudent].descript;
    },
    toLeft(){
        let start = this.selfList.shift()
        this.selfList.push(start)
        // if(this.currentIndex==0){
        //     this.currentIndex = this.studentList.length-1
        // }else{
        //     this.currentIndex -=1
        // }
        // console.log(this.currentIndex,this.selfList.length)
    },
    toRight(){
        let end = this.selfList.pop()
        this.selfList.unshift(end)
        // if(this.currentIndex<this.selfList.length-this.maxShow){
        //     this.currentIndex +=1
        // }else{
        //     this.currentIndex = this.studentList.length-1
        // }
        // console.log(this.currentIndex,this.selfList.length)
    }
    // changeIndex(pra){
    //     if(pra==1 && this.currentIndex<this.selfList.length-4){
    //         this.currentIndex +=1
    //     }
    //     if(pra==0  && this.currentIndex!=0){
    //         this.currentIndex -=1
    //     }
    //     //console.log(this.studentList.length-4,this.currentIndex)
    // }
  },
  watch:{
    studentList: function () {
      if(this.studentList){
        this.selfList = this.studentList.slice(0)
        this.currentImg = this.selfList[this.currentStudent].img;
        this.currentJob = this.selfList[this.currentStudent].job || this.selfList[this.currentStudent].position;
        this.currentName = this.selfList[this.currentStudent].name;
        this.currentText = this.selfList[this.currentStudent].detail || this.selfList[this.currentStudent].descript;
        //console.log(this.currentImg,this.currentJob,this.currentName,this.currentText)
      }
    }
  } 
 
}
</script>

<style lang="stylus" scoped>
.student-ict{
    background:rgba(255,255,255,1);
    box-shadow:0px 1px 2px 0px rgba(0,0,0,0.1);
    margin-bottom: 20px;  
}
.student-ict-title{
    box-sizing: border-box;
    font-size:16px;
    color:rgba(30,30,30,1);
    padding-left: 30px;
    line-height:58px;
    border-bottom: 1px solid rgba(238,238,238,1);
}
.student-ict-body{
    padding: 40px 30px;
}
.student-ict-info{
    position: relative;
    margin-bottom: 40px;
    .student-info-title{
        padding: 28px 0;
        padding-left: 240px;
        font-size: 0;
        span{
            display: inline-block;
        }
        .student-info-name{
            font-size:24px;
            font-family:MicrosoftYaHei-Bold;
            font-weight:bold;
            color:rgba(30,30,30,1);
            line-height:24px;
            margin-right: 40px;
        }
        .student-info-job{
            font-size:14px;
            font-family:MicrosoftYaHei;
            color:rgba(130,130,130,1);
            line-height:14px;
        }
    }
    .student-job-info{
        min-height:176px;
        padding: 30px 120px 30px 240px; 
        background:rgba(245,245,245,1);
        position: relative;
        p{
            font-size:14px;
            font-family:MicrosoftYaHei;
            color:rgba(82,82,82,1);
            line-height:34px;
        }
    }
    .student-job-info:after{
        position: absolute;
        width:1px;
        height:106px;
        background:rgba(20,87,253,1);
        content: '';
        top: 30px;
        right: 80px;
    }
    .student-img{
        width:162px;
        height:216px;
        position: absolute;
        top: 0;
        left: 40px;
        z-index: 10;
        background-size:  216px auto;
        background-position: center center;
        img{
            width: 100%;
            height: 100%;
        }
    }  
}
.student-ict-list{
    font-size: 0;
    margin-bottom: 20px;
    height: 144px;
    overflow: hidden;
    position: relative;
    position: relative;
    .student-item-container{
        position: absolute;
        // transition: all .3s;
        margin-left: 20px;
    }
    .student-item{
        // display: inline-block;
        position: absolute;
        vertical-align: top;
        top: 0;
        text-align: center;
        width:142px;
        height:144px;
        margin-right: 80px;
        .student-item-img{
            margin: auto;
            margin-bottom: 20px;
            margin-top: 20px;
            width:48px;
            height:48px;
            img{
                border-radius: 50%;
                width: 100%;
                height: 100%;
                border: 2px solid rgba(255,255,255,1);
                cursor: pointer;
                &:hover{
                    border: 2px solid rgba(20,87,253,1);
                }
            }
            .studentImgBorder{
                border: 2px solid rgba(20,87,253,1);
            }
        }
        .student-item-name{
            font-size:14px;
            font-family:MicrosoftYaHei;
            color:rgba(30,30,30,1);
            line-height:14px;
            margin-bottom: 10px;
        }
        .student-item-job{
            font-size:12px;
            font-family:MicrosoftYaHei;
            color:rgba(168,168,168,1);
            line-height:12px;
        }
    }
    
    .to-left{
        width:30px;
        height:30px;
        background:rgba(245,245,245,1);
        position: absolute;
        top: 57px;
        left: 0;
        font-size: 14px;
        padding-top: 5px;
        padding-left: 10px;
        .icon-zuojiantou:before{
             color: #B2B2B2 !important;
        } 
        &:hover{
            background:rgba(20,87,253,1);
            .icon-zuojiantou:before{
             color: #fff !important;
            } 
        }
    }
    .to-right{
        width:30px;
        height:30px;
        background:rgba(245,245,245,1);
        position: absolute;
        top: 57px;
        right: 0;
        font-size: 14px;
        padding-top: 5px;
        padding-left: 10px;
        .icon-youjiantou:before {
            color: #B2B2B2 !important;
        }

        &:hover{
            background:rgba(20,87,253,1);
            .icon-youjiantou:before{
             color: #fff !important;
            } 
        }
    }   
}

</style>
